<template>
	<view id="nav" class="navbar ltr" :style="{'height': customBarH + 'px'}">

		<view :class="{'custom': custom, 'fixed': fixed || transparent}"
			:style="{'height': customBarH + 'px','padding-top':navBarH+'px','background': bgcolor, 'color': isStyle=='dark'?'#353535':'#ffffff', 'z-index': zIndex}">
			<view :style="{'height': statusBarH + 'px'}">
				<u-row justify="space-between">
					<u-col :span="isAvatar?10:2">
						<view v-if="isAvatar && isAvatarSlot==false" class="dis">

							<view class="ww  mg-top-10  mg-left-10">
								<view class="flex" size="10" :border="false">
									<image class="avatar" :src="avatar"></image>
									<text class="font-size-12 color-black  linea utitle">
										{{title}}
									</text>

								</view>
							</view>
						</view>
						<slot name="avatar" v-if="isAvatarSlot"></slot>

						<view class="back " v-if="isAvatar==false && back==true" @click="goBack">
							<u-icon :color="isStyle=='dark'?'#353535':'#ffffff'" name="arrow-left" :size="23"></u-icon>
						</view>

					</u-col>
					<u-col span="8" v-if="!isAvatar">
						<view class="title  font-bold font-size-14" :class="isStyle"
							:style="{'line-height': (statusBarH-10) + 'px'}">
							{{title}}
						</view>
					</u-col>
					<u-col span="2">
						<view class="demo-layout bg-white"></view>
					</u-col>
				</u-row>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			// 是否采用自定义导航模式
			custom: {
				type: [Boolean, String],
				default: false
			},
			// 是否返回
			back: {
				type: [Boolean, String],
				default: true
			},
			isAvatar: {
				type: Boolean,
				default: false
			},
			isAvatarSlot: {
				type: Boolean,
				default: false
			},
			avatar: {
				type: String,
				default: ""
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			isStyle: {
				type: String,
				default: "dark" //dark,light
			},
			// 标题颜色
			color: {
				type: String,
				default: '#353535'
			},
			// 背景色
			bgcolor: {
				type: String,
				default: 'transparent' //transparent
			},
			// 标题是否居中
			center: {
				type: [Boolean, String],
				default: false
			},
			// 搜索框
			search: {
				type: [Boolean, String],
				default: false
			},
			// 是否固定导航
			fixed: {
				type: [Boolean, String],
				default: false
			},
			// 是否背景透明
			transparent: {
				type: [Boolean, String],
				default: false
			},
			// 设置层叠
			zIndex: {
				type: [Number, String],
				default: 2022
			},
		},
		data() {
			return {
				// 支持nvue页面写法（兼容H5/小程序/APP/APP-Nvue）
				navBarH: 20,
				statusBarH: 40,
				customBarH: 50
			}
		},
		mounted: function() {
			uni.setBackgroundTextStyle({
				textStyle: this.isStyle
			})
			uni.createSelectorQuery().selectViewport().scrollOffset(res => {
				console.log("竖直滚动位置" + res.scrollTop);
			}).exec();

			const query = uni.createSelectorQuery().in(this);
			query.select('#nav').boundingClientRect(data => {
				console.log("得到布局位置信息" + JSON.stringify(data));
				console.log("节点离页面顶部的距离为" + data.top);
			}).exec();
			uni.createIntersectionObserver(this).relativeToViewport('#nav', {
				bottom: 100
			}).observe('.test', (res) => {
				console.log(res);
			})
		},
		created: function() {
			console.log("NavBar")
			uni.setBackgroundTextStyle({
				textStyle: this.isStyle
			})
			uni.getSystemInfo({
				success: (e) => {
					console.log(e)
					uni.setStorageSync("systeminfo", e)
					// 获取手机状态栏高度
					let statusBar = e.statusBarHeight
					let customBar, navBar

					// #ifndef MP
					customBar = statusBar + (e.platform == 'android' ? 50 : 45)
					// #endif

					// #ifdef MP-WEIXIN
					// 获取胶囊按钮的布局位置信息
					let menu = wx.getMenuButtonBoundingClientRect()
					// 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
					customBar = menu.bottom + menu.top - statusBar
					console.log(menu)
					navBar = menu.top;
					// #endif

					// #ifdef MP-ALIPAY
					customBar = statusBar + e.titleBarHeight
					navBar = statusBar;
					// #endif

					// 注意：此方法不支持原生Nvue页面
					//	Vue.prototype.statusBarH = statusBar
					//	Vue.prototype.customBarH = customBar

					// 支持nvue页面写法（兼容H5/小程序/APP/APP-Nvue）
					this.statusBarH = statusBar
					this.customBarH = customBar
					this.navBarH = navBar
				}
			})
			uni.setNavigationBarTitle({
				title: this.title || ""
			})

		},
		methods: {
			goBack: function() {
				console.log("GoBank")
				uni.navigateBack({
					delta: 0
				})
			}
		}
	}
</script>

<style>
	.dark {
		color: #000 !important;
	}

	.navbar {
		overflow: hidden;
	}

	.title {
		align-items: center;
		text-align: center;
	}

	.back {
		text-align: center;
		text-indent: 10px;
	}

	.avatar {
		width: 30px;
		height: 30px;
		background-color: #FFA500;

		border-radius: 50px;
	}

	.dis {
		margin-top: -10px;
		color: #FFFFFF;
	}

	.ww {
		width: 200px;
		border-radius: 30px;
		height: 30px;
		background-color: #ffffff7a;
	}

	.flex {
		display: flex !important;
		flex-flow: row wrap;
	}

	.linea {
		line-height: 35px !important;
		text-indent: 10px;
	}

	.ltr {
		direction: ltr;
	}

	.utitle {
		width: 75%;
		text-overflow: ellipsis;
	}
</style>